<template>
    <div class="marketing_enough_detail">
        <!-- 头部 -->
        <div class="marketing_enough_detail_top">
            <div class="marketing_enough_detail_header">
                <div class="marketing_enough_detail_header_left">
                    <h1>
                        {{ basisInfo.activityName }}
                        <el-tag
                            class="custom-el-tag"
                            :class="`custom-tag-${basisInfo?.activityStatusName?.realStatus}`"
                            effect="plain"
                            >{{ basisInfo?.activityStatusName?.realStatusName }}</el-tag
                        >
                    </h1>
                </div>
                <div class="marketing_enough_detail_header_right">
                    <el-button
                        v-if="[1, 2].includes(basisInfo?.activityStatusName?.realStatus)"
                        type="primary"
                        :ref="el => setItemRef(el, 'spreadButtonRef')"
                        @click="spreadHandler('spreadButtonRef')"
                        v-auth="'enough_list:spread'"
                        >推广</el-button
                    >
                    <el-button
                        v-if="[1, 2].includes(basisInfo?.activityStatusName?.realStatus)"
                        @click="popoverHandler('endButtonRef')"
                        v-auth="'enough_list:end'"
                        :ref="el => setItemRef(el, 'endButtonRef')"
                        >结束</el-button
                    >
                    <!-- <el-button
                        v-if="[3].includes(basisInfo?.activityStatusName?.realStatus)"
                        @click="popoverHandler('removeButtonRef')"
                        v-click-outside="onClickOutside"
                        :ref="el => setItemRef(el, 'removeButtonRef')"
                        >删除</el-button
                    > -->
                </div>
            </div>
            <el-row class="custom-header-row">
                <el-col :span="8"
                    >满减类型：<span>{{ basisInfo.activityTypeText }}</span></el-col
                >
                <el-col :span="8"
                    >创建人：<span>{{ basisInfo.createdUidName }}</span></el-col
                >
                <el-col :span="8"
                    >创建时间：<span>{{ basisInfo.createdAt }}</span></el-col
                >
            </el-row>
        </div>
        <!-- 内容 -->
        <div class="marketing_enough_detail_content">
            <!-- tab -->
            <el-tabs class="statistics-tab" v-model="tabActiveName">
                <el-tab-pane
                    v-for="{ name, label } in detailTabs"
                    :key="name"
                    :label="label"
                    :name="name"></el-tab-pane>
            </el-tabs>
            <component
                :is="componentId"
                :id="id"
                :type="basisInfo.activityType"
                :name="basisInfo.activityName"
                :status="basisInfo?.activityStatusName?.realStatus"></component>
        </div>
        <!-- popover弹窗 -->
        <el-popover
            popper-class="custom-enough-popover-class not-close"
            ref="popoverRef"
            :virtual-ref="buttonRef"
            placement="bottom"
            trigger="click"
            virtual-triggering
            :width="currentRow.ref === 'spreadButtonRef' ? 400 : 240"
            :visible="popoverVisible">
            <!-- todo:不同的内容 -->
            <div
                class="custom-enough-popover-class-main"
                v-click-outside="onClickOutside"
                :preview-teleported="true"
                v-if="['endButtonRef', 'removeButtonRef'].includes(currentRow.ref)">
                <template v-if="currentRow.ref == 'endButtonRef'">
                    <h3>
                        <el-icon class="custom-icon"><WarningFilled /></el-icon>你确定要结束吗？
                    </h3>
                    <!-- 未开始状态结束时确认提醒 -->
                    <p v-if="basisInfo?.realStatus / 1 == 1">结束后活动将无法启用</p>
                    <!-- 进行中状态结束时确认提醒 -->
                    <p v-else>结束后活动将立即结束，无法再次启用</p>
                </template>
                <!-- 删除 -->
                <h3 v-if="currentRow.ref == 'removeButtonRef'">
                    <el-icon class="custom-icon"><WarningFilled /></el-icon>你确定要删除吗
                </h3>
                <div class="custom-enough-popover-footer">
                    <el-button size="small" @click="popoverVisibleHandler()">取消</el-button>
                    <el-button size="small" type="primary" @click="popoverConfirmHandler()">确定</el-button>
                </div>
            </div>
            <SpreadBox
                v-if="popoverVisible && currentRow.ref === 'spreadButtonRef'"
                :path="path"
                :params="params"
                :downloadName="downloadName"
                :popoverFn="popoverVisibleHandler" />
        </el-popover>
    </div>
</template>

<script setup>
import { ref, unref, nextTick, computed, watch, defineAsyncComponent, onMounted, onUnmounted, reactive } from 'vue';
import request from '@/request/index';
import { useRoute } from 'vue-router';
import { setLayout, resetLayout } from '@/hooks/layout';
import { ElMessage } from 'element-plus';
import { ClickOutside as vClickOutside } from 'element-plus';
import storage from '@/commons/storage';
import SpreadBox from '@/components/SpreadBox.vue';

const route = useRoute();

let basisInfo = reactive({});
const popoverRef = ref(null);
const buttonRef = ref(null);
let currentRow = reactive({ ref: null, codeUrl: null });
let popoverVisible = ref(false);
const itemRefs = {};
const setItemRef = (el, key) => {
    if (el) {
        itemRefs[key] = el;
    }
};

const detailTabs = [
    { name: 'statistics', label: '数据统计' },
    { name: 'group', label: '满减详情' }
];
const tabActiveName = ref('group');

const queryType = computed(() => route?.query?.type || 'group');
const componentId = computed(() => {
    // todo:看其他环境是否可行，不行的话采用另一种导入方案
    const defineAsyncComponents = {
        group: defineAsyncComponent(() => import('./group.vue')),
        statistics: defineAsyncComponent(() => import('./statistics.vue'))
    };
    return defineAsyncComponents[tabActiveName.value];
});
const id = computed(() => {
    return route?.query?.id;
});
const query = computed(() => {
    return route?.query;
});

watch(
    () => queryType,
    val => {
        tabActiveName.value = val.value;
    },
    { immediate: true }
);

// 点击popover外部
const onClickOutside = el => {
    popoverVisibleHandler();
};
// 控制popover展示隐藏
const popoverVisibleHandler = (visible = false) => {
    popoverVisible.value = visible;
};
// popover确定
const popoverConfirmHandler = async () => {
    await request(`fullreduce${currentRow.ref === 'removeButtonRef' ? 'Del' : 'End'}`, { id: unref(id) });
    popoverVisibleHandler();
    ElMessage({
        type: 'success',
        message: '操作成功'
    });
    if (currentRow.ref === 'removeButtonRef') {
        window.close();
    }
    getBasisInfo();
};

const popoverHandler = ref => {
    buttonRef.value = itemRefs[ref];
    currentRow.ref = ref;

    nextTick(() => {
        popoverVisible.value = true;
    });
};

// 推广
let path = ref();
let params = ref();
let downloadName = ref();
const spreadHandler = async ref => {
    path.value = 'pages-cart/activeDetail/index';
    params.value = `activityId=${id.value}&shopId=${storage.get('ZW-SHOPID')}`;
    downloadName.value = basisInfo.activityName;
    popoverHandler(ref);
};

const getBasisInfo = async () => {
    const { data } = await request('fullreduceBasicActivity', { id: unref(id) });
    const types = {
        7: '满x元减',
        8: '满x件折'
    };
    data.activityTypeText = types[data.activityType];
    Object.assign(basisInfo, data);
    // const res = await request('spellGroupStatisticOrderList', { id });
    // console.log(res);
};

const getAllData = async () => {
    getBasisInfo();
};

onMounted(() => {
    getAllData();
    setLayout();
});
onUnmounted(() => {
    resetLayout();
});
</script>

<style lang="scss">
.custom-enough-popover-class {
    padding: 0px !important;
    &-main {
        padding: 16px !important;
    }
    h3,
    p {
        margin: 0;
    }
    h3 {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
        display: flex;
        margin-bottom: 10px;
        .custom-icon {
            width: 14px;
            height: 14px;
            margin-right: 9px;
            color: #faad14;
            margin-top: 2px;
        }
    }

    p {
        padding-left: 23px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 16px;
        margin: 0 0 16px;
    }

    p + div {
        text-align: right;
    }
}
.custom-enough-popover-footer {
    text-align: right;
}
</style>
<style lang="scss" scoped>
$colors: #f4f4f4, #ecf9fd, #fff1ed;
$colors2: #cccccc, #2fb6e4, #ff4a1a;

.marketing_enough_detail {
    :deep h1 {
        font-weight: 400;
    }
    &_top {
        background-color: #fff;
        margin-bottom: 16px;
        padding: 24px;
    }
    &_header {
        display: flex;
        justify-content: space-between;
        &_left {
            h1 {
                display: flex;
                align-items: center;
                margin: 0;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #33302d;
                .custom-el-tag {
                    margin-left: 8px;
                }
                @for $i from 1 to 3 {
                    .custom-tag-#{$i} {
                        color: nth($colors2, $i);
                        background: nth($colors, $i);
                        border-color: nth($colors, $i);
                        font-size: 14px;
                        font-weight: 400;
                        border-radius: 2px;
                    }
                }
            }

            & > div {
                margin: 20px 0;
                span {
                    color: #9f9f9f;
                    margin-right: 30px;
                }
            }
        }
        &_right .el-button {
            width: 80px;
        }
        margin-bottom: 26px;
    }

    .statistics-tab {
        :deep {
            .el-tabs__item {
                font-size: 16px;
                color: #969696;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                &.is-active {
                    font-weight: 500;
                    color: var(--el-color-primary);
                    font-family: PingFangSC-Medium, PingFang SC;
                }
            }
        }
    }

    .custom-header-row .el-col {
        color: #969696;
        font-size: 14px;
        span {
            color: #33302d;
        }
    }

    &_content {
        background-color: #fff;
        padding: 24px;
        padding-top: 12px;
    }
    :deep .el-tabs__nav-wrap::after {
        height: 1px;
    }
}
</style>
